<template>
  <view class="play-tour">
    <view class="topPage" :style="{height:`${pageHeight.topH}rpx`}"></view>

    <view class="content-view">
      <!-- 规则说明 -->
      <view class="rule">
        <text class="rule-title">打赏规则</text>
        <text class="rule-cont">巧人您好，为监督与促进品牌发展，现发放打赏福利。</text>
        <text class="rule-cont">可打赏金额为消费金额的10%，一单一券。</text>
        <text class="rule-cont">打赏后下单可使用打赏金额双倍无限期无规则抵用券。</text>
      </view>

      <!-- 打赏商品列表 -->
      <view v-if="data.length > 0">
        <view class="tour-list">
          <view class="check-item">已选订单 ({{ selectList.length }}单)</view>
          <view
            class="scoll-item"
            :style="{
							maxHeight: show ? '40vh' : '35vh',
							overflowY: show ? 'auto' : 'hidden',
						}"
          >
            <view
              :key="item.id"
              class="tour-item"
              v-for="(item, idx) in data"
              @click="checkItem(item)"
              :style="{
								borderBottom: idx == data.length - 1 ? '' : '2rpx solid #dcdcdd',
							}"
            >
              <view
                class="dgc bsf f-c"
                :style="{
									background: item.checked ? '' : '#fff',
									border: '3rpx solid #CACBCD',
								}"
              >
                <text
                  class="iconfont icongou f22"
                  :style="{
										color: item.checked ? '#FEFEFE' : '',
										display: item.checked ? 'black' : 'none',
									}"
                ></text>
              </view>
              <image class="tour-img" :src="item.icon" />
              <view class="tour-text">
                <text class="tour-title">{{ item.name }}</text>
                <text class="money">￥{{ item.money }}</text>
                <text class="tour-date color1">
                  {{
                  timeToDate(item.createdAt)
                  }}
                </text>
              </view>
              <view class="tour-ratio color1">
                <text>打赏</text>
                <text class="tour-money">(10%)</text>
              </view>
              <view class="tour-title">￥{{ item.discounted }}</view>
            </view>
          </view>
        </view>
        <view
          v-if="data.length > 4 && !show"
          style="
						display: flex;
						justify-content: center;
						position: reactive;
						top: -10rpx;
					"
          @click="
						() => {
							show = !show;
						}
					"
        >
          <image style="width: 45rpx; height: 40rpx" src="../../../static/show.png" />
        </view>
      </view>
      <view class="null-list" v-else @click.stop="go({ t: 3, url: `/yb_wm/index/goods` })">请下单后进行打赏</view>

      <!-- 打赏操作 -->
      <view class="footer-tour" v-if="this.data.length > 0">
        <view class="footer-left">
          <text class="footer-title">打赏 ￥{{ tourMoney }}</text>
          <text class="footer-text">(双倍返还打赏金额)</text>
        </view>
        <view class="footer-right" @click="showCarHandle">确认打赏</view>
      </view>
    </view>

    <mg-popup v-model="showCar">
      <view class="tour-model">
        <view>
          <view>
            <text class="title">打赏</text>
            <text class="money">￥{{ tourMoney }}</text>
          </view>
          <view class="detail">双倍返还打赏金额作为抵用券</view>
        </view>

        <view class="handle-btn">
          <view
            class="cancel"
            @click="
              () => {
                showCar = false;
              }
            "
          >放弃打赏</view>
          <view class="ensure" @click="comfit">确定打赏</view>
        </view>
      </view>
    </mg-popup>

    <footc></footc>
    <tab-bar></tab-bar>
    <load v-if="showloading"></load>
  </view>
</template>

<script>
import load from "@/components/common/load.vue";
import footc from "@/components/common/footc.vue";
import { mapActions, mapState } from "vuex";
import { utilMixins } from "@/common/util-mixins.js";
import jzz from "@/components/common/jzz.vue";
import mgPopup from "@/components/common/popup.vue";
import utils from "@/common/utils.js";

let app = getApp().globalData;

export default {
  name: "mine",
  components: { load, footc, jzz, mgPopup },
  mixins: [utilMixins],

  data() {
    return {
      showloading: true,
      opcity: 0,
      data: [],
      show: false,
      showCar: false,
      selectList: []
    };
  },

  onLoad(options) {
    uni.hideHomeButton();

    this.getSystem();
    this.getLoginInfo({ inviteId: options.userId });
    this.getLayout({ page: "personalcenter", id: "2" }).then(() => {
      this.showloading = false;
      // #ifdef H5
      this.util.setNT(this.layout.pageSetting[0].styles.navTitle || "个人中心");
      // #endif
    });
    this.getConfig({
      key: "vipset",
      api: "config",
      params: { ident: "vipSet" }
    });
    this.getLayout();
  },
  onShow() {
    if (this.uId) {
      this.refreshUser({ nomask: 1, get: 1, now: 1 });
    }
    this.getList();
  },
  computed: {
    ...mapState({
      layout: state => state.layout.personalcenter.body || {}
    }),

    tourMoney() {
      let money = 0;
      this.selectList.forEach(item => {
        money += parseFloat(item.discounted);
      });
      return money.toFixed(2);
    },

    pageHeight() {
      if (!getApp().sgheight) {
        let h = uni.getSystemInfoSync(),
          topH = +(h.statusBarHeight + 44 + uni.upx2px(208)).toFixed(2),
          topH2 = 198;
        getApp().sgheight = { topH, topH2 };
      }
      return getApp().sgheight;
    },

    discount: function() {
      return function(val) {
        const price = Number(val);
        if (isNaN(price) || price < 0) {
          return 0.0;
        }
        const discountedPrice = price * 0.9;
        return discountedPrice.toFixed(2);
      };
    }
  },

  methods: {
    ...mapActions(["getConfig"]),

    // 处理状态
    checkItem(value) {
      this.data.forEach(item => {
        if (item.id == value.id) {
          item.checked = !item.checked;
        }
      });
      if (value.checked) {
        this.selectList.push(value);
      } else {
        this.selectList.forEach((item, index) => {
          if (item.id == value.id) {
            this.selectList.splice(index, 1);
          }
        });
      }
    },

    //
    showCarHandle() {
      if (this.selectList.length == 0) {
        this.util.message("请选择打赏订单", 3);
        return;
      }
      this.showCar = true;
    },

    // 确定打赏
    async comfit() {
			const data = {
				money: this.tourMoney,
				id: this.selectList.map((item) => item.id).join(',')
			}
      const res = await this.util.request({
        url: this.api.giveRewardOrder,
        method: "POST",
        data
      });
			if(res.code !== 1) {
				this.util.message(res.msg, 1);
				return
			}
      this.go({
        t: 2,
        url:
          "/yb_wm/other/mg-pay?payObj=" +
          encodeURIComponent(
            JSON.stringify({
              orderId: res.data,
              orderType: 10,
              info: {
                money: this.tourMoney,
                storeName: "打赏支付",
                type: "打赏支付",
                go: {
                  url: `/yb_wm/my/coupon/mys`
                }
              }
            })
          )
      });
      this.getList();
    },

    // 加载数据源
    async getList() {
      let { data } = await this.util.request({ url: this.api.giveGoodsList });
      data.forEach(item => {
        item.checked = false;
        item.discounted = this.discount(item.money);
      });
      this.data = data;
    }
  },

  onPageScroll(e) {
    if (this.opcity >= 1 && e.scrollTop / 64 >= 1) {
      return;
    }
    let o = e.scrollTop / 64;
    this.opcity = o;
  }
};
</script>
<style scoped lang="scss">
.topPage {
  background-color: #fff;
}

.content-view {
  padding: 40rpx;
}

.play-tour {
  // padding: 160rpx 40rpx 40rpx;
  background-color: #f7f7f7;

  .rule {
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
    padding: 30rpx 30rpx 40rpx;
    border-radius: 5rpx;
    margin-bottom: 40rpx;

    .rule-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }

    .rule-cont {
      font-size: 26rpx;
      color: #666;
      line-height: 40rpx;
    }
  }

  .footer-tour {
    margin: 0 40rpx;
    position: fixed;
    bottom: 140rpx;
    left: 0;
    width: 90%;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0 10rpx 0 40rpx;
    border-radius: 60rpx;
  }

  .footer-title {
    font-weight: 700;
    letter-spacing: 3rpx;
    font-size: 32rpx;
  }

  .footer-text {
    font-size: 26rpx;
    color: #666;
    margin-top: 10rpx;
  }

  .footer-right {
    width: 200rpx;
    height: 80rpx;
    background-color: #303030;
    color: #fff;
    font-size: 32rpx;
    text-align: center;
    line-height: 80rpx;
    font-weight: 700;
    letter-spacing: 3rpx;
    border-radius: 40rpx;
  }
}

.tour-list {
  background-color: #fff;
  border-radius: 5rpx;
  padding: 30rpx 30rpx;
  margin-bottom: 15rpx;

  .check-item {
    font-size: 28rpx;
    color: #333;
    font-weight: 700;
    margin-bottom: 30rpx;
  }

  .tour-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;

    .tour-img {
      width: 100rpx;
      height: 120rpx;
    }

    .tour-text,
    .tour-ratio {
      display: flex;
      flex-direction: column;
    }

    .tour-ratio {
      align-items: center;
    }

    .tour-title {
      font-size: 25rpx;
      font-weight: 700;
      color: #333;
      letter-spacing: 3rpx;
    }

    .money {
      font-size: 25rpx;
      font-weight: 700;
      color: #333;
    }

    .color1 {
      font-size: 23rpx !important;
      color: #bfc0c2 !important;
    }
  }
}

.null-list {
  margin: 100rpx auto 0;
  width: 50vw;
  height: 80rpx;
  line-height: 75rpx;
  text-align: center;
  letter-spacing: 3rpx;
  font-size: 28rpx;
  color: #616161;
  border: 1.5rpx solid #808080;
  border-radius: 60rpx;
}

.tour-model {
  text-align: center;
  padding: 80rpx 0;
  height: 40vh;
  border-radius: 60rpx 60rpx 0 0;
  background-color: #fff;

  .title {
    margin-right: 50rpx;
    font-size: 50rpx;
    color: #000;
    font-weight: bold;
    letter-spacing: 5rpx;
  }

  .money {
    font-size: 40rpx;
    color: #000;
    font-weight: 700;
  }

  .detail {
    margin-top: 15rpx;
    font-size: 24rpx;
    color: #000;
    font-weight: 400;
  }
}

.handle-btn {
  margin-top: 100rpx;
  display: flex;
  justify-content: center;

  .cancel {
    width: 250rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 60rpx;
    font-size: 30rpx;
    letter-spacing: 3rpx;
    font-weight: 600;
    color: #fff;
    background-color: #c6c6c6;
  }

  .ensure {
    margin-left: 60rpx;
    width: 250rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 60rpx;
    font-size: 30rpx;
    letter-spacing: 3rpx;
    font-weight: 600;
    color: #fff;
    background-color: #303030;
  }
}

.dgc {
  width: 40rpx;
  height: 40rpx;
  background: #040403;
}
</style>